<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!--页面中对静态资源的引用以下为例-->
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../layui/css/layui.css">
		<link rel="stylesheet" href="../../layui/css/layui.icon.css" />
		<link rel="stylesheet" href="../../css/lceditor.css" />
		<link rel="stylesheet" href="../../css/contextMenu.css" />
		<style>
			.func-list {}
			
			.func-tool {}
			
			.layui-fluid {
				padding: 0px;
			}
			
			.layui-row,
			.layui-col-sm2,
			.layui-col-sm8,
			.layui-col-sm10,
			.layui-col-sm12 {
				height: 100%;
			}
			
			.side-toolbar {
				height: 15px;
				background-color: darkseagreen;
			}
			
			.left {
				position: fixed;
				top: 0px;
			}
			
			.right {
				position: fixed;
				top: 0px;
				right: 0px;
			}
			
			.off {
				width: 10px;
				height: 100%;
			}
			
			.func-item {
				border-bottom: 1px solid #eeeeee;
				padding: 5px 10px;
				cursor: hand;
			}
			
			.func-item:hover {
				background-color: #ffca15;
			}
			
			.left-tool {
				padding-top: 15px;
			}
		</style>
	</head>

	<body>
		<div class="layui-fluid">
			<div class="layui-row">
				<div class="layui-col-sm2 left-tool on" style="background-color: gold;">
					<div class="func-list">
	<!--					<div class="func-item">
							<h3>获取用户信息</h3>
							<p>根据用户获取用户心心相惜那些年</p>
						</div>
						<div class="func-item">
							<h3>获取用户信息</h3>
							<p>根据用户获取用户心心相惜那些年</p>
						</div>
						<div class="func-item">
							<h3>获取用户信息</h3>
							<p>根据用户获取用户心心相惜那些年</p>
						</div>-->
					</div>
				</div>
				<div id="main" class="layui-col-sm10" style="background-color: aquamarine;">
					<div class="flow-container">
						<div class="flow-panzoom">
							<div id="canvas" class="flowchart-area">

							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-sm2  right-tool" style="display:none;background-color: gold;">

					<div class="layui-collapse" lay-filter="func-node">
						<div class="layui-colla-item">
							<h2 class="layui-colla-title">基础元素</h2>
							<div class="layui-colla-content layui-show">
								<div id="basic_node"  class="func-tool">
									
								</div>
							</div>
						</div>
						<div class="layui-colla-item">
							<h2 class="layui-colla-title">高级元素</h2>
							<div  class="layui-colla-content layui-show">
								<div id="advanced_node" class="func-tool">
									
								</div>
							</div>
						</div>
						<div class="layui-colla-item">
							<h2 class="layui-colla-title">自定义</h2>
							<div class="layui-colla-content layui-show">
								<div id="user_node" class="func-tool">
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="side-toolbar left" target="left"><i class="side-btn layui-icon">&#xe603;</i></div>
		<div class="side-toolbar right" target="right"><i class="side-btn layui-icon">&#xe602;</i></div>
	</body>
	<script type="text/javascript" src="../../js/jsplumb.js"></script>
	<script type="text/javascript" src="../../layui/layui.js"></script>
	<script>
		layui.config({
			base: '../../js/' //假设这是你存放拓展模块的根目录
		}).extend({ //设定模块别名
		});
	</script>
	<script type="text/javascript" src="../../js/lceditor.js"></script>

</html>